<!doctype html><!--用来声明这是一个网页文件 html5 兼容模式-->
<html><!--根目录标签 html:超文本标记语言,由很多标签标记的这样一门语言-->
	<head><!--头部:不可视标签-->
		<!--网页三要素-->
		<title>皖茶四说</title>
		<meta name="Author" content="李龙"><!--元标签,引入相关属性-->
		<meta charset="utf-8"><!--万国码-->
		<meta name="keywords" content="皖茶四说"><!--关键词,seo优化-->
		<meta name="description" content="皖茶四说"><!--页面描述-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" href="css/index.css">
		<style>
		    body{font-family: "Microsoft YaHei",serif;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}
        </style>
		<script>
			let desW = 640;
			let winW = document.documentElement.clientWidth;
			document.documentElement.style.fontSize = winW/desW*100+'px';
		</script>
	</head>
	<body><!--身体:可视化标签-->
		<article class="main">
			<div class="rotate audio1">
				<audio src="audio/chinax.mp3" preload="none" id="chinax"></audio>
			</div>
			<section class="loading">
				<div class="load-head">
					<h3>皖茶四说</h3>
					<h3>正在进入皖茶的世界</h3>
				</div>
				<div class="progress">
					<div class="progress-bar"></div>
				</div>
				<div id="enter"></div>
			</section>
			<section class="phone">
				<h3 class="phone-name"></h3><!--老爸-->
				<p class="phone-text"></p>
				<div class="phone-listen">
					<div class="listen-arc"></div>
					<div class="touch"></div>
				</div>
				<div class="phone-key">
					<div class="phone-refuse"></div>
				</div>
				<div class="audio">
					<audio src="audio/bell.mp3" preload="none" loop id="bell"></audio>
					<!--<audio src="audio/bell.mp3" preload="none" loop id="bell"></audio>-->
					<audio src="audio/say.mp3" preload="none" id="say"></audio>
				</div>
			</section>
			<section class="msg">
				<div class="content">
					<p class="right">
						<span class="u-img"></span>
						<span class="u-content">Hi，茶博士。咱们安徽有哪些特色的好茶?</span>
					</p>
					<p class="left">
						<span class="u-img"></span>
						<span class="u-content">那你可问对人了!安徽的四大名茶你不知道吗?</span>
					</p>
					<p class="right btnMsg">
						<span class="u-img"></span>
						<span class="u-content">知道。红茶，绿茶，茉莉花茶还有奶茶。</span>
					</p>
					<p class="left">
						<span class="u-img"></span>
						<span class="u-content">你确定???安徽四大名茶可是名扬中外的。那今天我就给你科普一下安徽的四大名茶。</span>
					</p>
					<p class="left">
						<span class="u-img"></span>
						<span class="u-content">安徽四大名茶分别是祁门红茶，六安瓜片，黄山毛峰，太平猴魁。</span>
					</p>
					<p class="left">
						<span class="u-img"></span>
						<span class="u-content">这里有个视频解说，我发给你看看。</span>
					</p>
					<p class="left">
						<span class="u-img"></span>
						<span class="u-content nontext u-content-video">
							<img src="images/video.png" id="vedio-img">
							<s class="vedio-btn"></s>
							<i class="quan"></i>
					</span>
					</p>
				</div>
				<div class="keyboard">
					<div class="keyboard-text"></div>
					<div class="keyboard-btn"></div>
				</div>
			</section>
			<section class="cube">
				<ul class="cube-box">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div class="cube-tip"></div>
			</section>
    <section class="details">
		<div class="detailsReturn"></div>
        <div class="swiper-container" id="swiper">
            <div class="swiper-wrapper">
							<!-- 祁门红茶 -->
                <div class="swiper-slide slide1">
					<div class="swiper-container" id="swiper1">
							<div class="swiper-wrapper">
								<div class="swiper-slide page1">1</div>
								<div class="swiper-slide page2">
									<div class="story-header">
										<h1>第一话:待在闺中</h1>
										<p>如果将祁门红茶比喻成婀娜窈窕的女子，我想这女子定是祁门茶人家中的闺中之秀。自古的闺阁少女习得琴棋书画，休养生息，祁门红茶自然也不例外，唯一不同的是祁门红茶经历的是四道不同的工序分别为萎凋，揉捻，发酵，和干燥四道工序</p>
									</div>
									<!-- <div class="stroy-img">
										<img src="images/detail/blacktea.jpg" alt="">
									</div> -->
									<div class="story-stepbox">
										<div class="story-step trigger">1.1萎凋</div>
										<div class="story-step trigger">1.2揉捻</div>
										<div class="story-step trigger">1.3发酵</div>
										<div class="story-step trigger">1.4干燥</div>
									</div>
									<div class="shield" style="display:none;">
										<div class="rule">
											<div class="content">
												<div class="ruletxt">
													<img src="images/intro/qmkc/1.1.png" alt="">
												</div>
											</div> 
											<span class="info"></span>
										</div>
									</div>
								</div>
								<div class="swiper-slide page3">3</div>
								<div class="swiper-slide page4">4</div>
								<div class="swiper-slide page5">3</div>
							</div>
					</div>
				</div>
								<!--祁门红茶 end -->
                <div class="swiper-slide slide2">
								
				</div>
                <!-- <div class="swiper-slide slide3">
                </div>
                <div class="swiper-slide slide4">
                </div>
                <div class="swiper-slide slide5">
                </div>
                <div class="swiper-slide slide6">
                </div> -->
            </div>
        </div>
    </section>
		</article>
		<!--竖屏提示 begin-->
		<div id="orientLayer" class="mod-orient-layer">
			<div class="mol_content">
				<div class="mol_desc">为了更好的体验，请使用竖屏浏览</div>
			</div>
		</div>
		<!--竖屏提示 end-->
<!-- 		<script type="text/javascript">
			var $audio1 = $(".audio1");
			$audio1.singleTap(function () {
				console.log("hell");
			});
		</script> -->
	</body>
</html>
<script src="js/zepto.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/orientLayer.js"></script>
<script src="js/index.js"></script>
<script src="js/story.js"></script>